《WaLiSSH - AI Shell 智能终端》第1-2节：UI 界面设计与实现

作者：小傅哥
博客：https://bugstack.cn (opens new window)
视频：https://t.zsxq.com/Jo31q (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！😄

大家好，我是技术UP主小傅哥。

今天是我们《WaLiSSH》项目学习的第2节课程。上一节我们完成了工程初始化搭建，项目已经能跑起来了。但那时候的界面还是比较"原始"的——基本就是组件的堆叠，没有完整的布局体系，也没有统一的视觉风格。

这一节，我们要给 WaLiSSH "穿上衣服"🧥，把它打造成一个专业的、VS Code 风格的 SSH 智能终端界面。

一、本章诉求

我们需要在上一节初始化工程的基础上，完成 WaLiSSH 的 UI 界面设计与实现，包括：

1. 布局重构：从简单的视图切换模式，升级为 VS Code 风格的多面板布局（ActivityBar + Sidebar + Terminal + AI Chat）
2. 主题系统：实现一套完整的主题管理机制，支持 Dark、Light、GitHub Dark、森林等多套主题切换
3. 组件拆分：将 UI 拆分为独立可维护的组件——Header、ActivityBar、LeftSidebar、RightSidebar、Settings、TerminalPanel
4. AI 驱动开发：通过 AI IDE 工具的提示词，让 AI 帮我们完成 UI 代码编写，学习如何用"需求话术"来驱动 AI 产出高质量的前端代码

👩🏻‍🏫敲黑板：这一节的核心不只是"写出 UI"，更重要的是学会如何用 AI 工具高效地完成 UI 开发。掌握了提示词的方法论，以后任何前端界面你都能快速🔜搞出来！

二、界面设计分析

2.1 从 1-1 到 1-2：界面演进

在上一节（1-1-xfg-init-project）中，我们的界面是这样的：

这个 UI 样式是小傅哥最早做的一个UI演示，再过程中也优化了几个版本。包括上一节最后看到的非常漂亮的UI。不知道你是否做了一个自己的一套UI没？

2.2 新版 VS Code 风格布局

这一节，我们将界面重构为VS Code 风格的多面板布局，这个布局就是 WaLiCode 的布局效果：

👩🏻‍🏫敲黑板：这个布局的核心思想是——"各司其职，灵活组合"。ActivityBar 做导航、LeftSidebar 做内容面板、Terminal 做核心工作区、RightSidebar 做 AI 辅助。每个区域可以独立显示/隐藏、独立调整宽度，就像 VS Code 一样！

如果你最开始不会设计UI，不知道怎么提问，那么就去找一些大厂过往做好的UI，先截图让 AI IDE 设计一版，之后再用这个版本做调整。walissh 的 ui 就是使用 walicode 的截图做的参考设计。